<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>退款详情 - 订单管理</title>
		<!-- 引入外部资源 -->
		<script src="https://cdn.tailwindcss.com"></script>
		<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

		<!-- Tailwind 配置 -->
		<script>
			tailwind.config = {
				theme: {
					extend: {
						colors: {
							primary: '#165DFF',
							success: '#00B42A',
							warning: '#FF7D00',
							danger: '#F53F3F',
							neutral: {
								100: '#F2F3F5',
								200: '#E5E6EB',
								300: '#C9CDD4',
								400: '#86909C',
								500: '#4E5969',
								600: '#1D2129',
							}
						},
						fontFamily: {
							inter: ['Inter', 'system-ui', 'sans-serif'],
						},
					},
				}
			}
		</script>

		<style type="text/tailwindcss">
			@layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .timeline-line {
        @apply absolute top-5 left-5 h-full w-0.5 bg-neutral-200 -z-10;
      }
      .timeline-dot {
        @apply absolute top-5 left-5 w-3 h-3 rounded-full bg-neutral-200 -translate-x-1/2;
      }
      .timeline-dot-active {
        @apply bg-primary ring-4 ring-primary/10;
      }
      .card-shadow {
        @apply shadow-sm hover:shadow-md transition-shadow duration-300;
      }
    }
  </style>
	</head>

	<body class="font-inter bg-gray-50 text-neutral-600 min-h-screen">
		<!-- 顶部导航 -->
		<header class="bg-white border-b border-neutral-200 sticky top-0 z-50">
			<div class="container mx-auto px-4 py-4 flex items-center justify-between">
				<div class="flex items-center space-x-2">
					<a href="#" class="text-primary text-xl font-bold">订单中心</a>
					<span class="text-neutral-300">/</span>
					<span class="text-neutral-500">退款详情</span>
				</div>
				<div class="flex items-center space-x-6">
					<button class="text-neutral-500 hover:text-primary transition-colors">
						<i class="fa fa-question-circle mr-1"></i>帮助中心
					</button>
					<div class="flex items-center space-x-2">
						<img src="https://picsum.photos/id/1005/40/40" alt="用户头像"
							class="w-8 h-8 rounded-full object-cover">
						<span class="hidden md:inline">张小明</span>
					</div>
				</div>
			</div>
		</header>

		<main class="container mx-auto px-4 py-8">
			<!-- 退款状态概览 -->
			<div class="bg-white rounded-lg p-6 mb-6 card-shadow">
				<div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
					<div>
						<h1 class="text-[clamp(1.25rem,3vw,1.75rem)] font-semibold text-neutral-600 mb-2">退款申请
							#TK202305180045</h1>
						<p class="text-neutral-500">关联订单：<span class="text-primary">ORD2023051712345</span></p>
					</div>
					<div class="mt-4 md:mt-0">
						<span
							class="inline-flex items-center px-3 py-1 rounded-full bg-warning/10 text-warning text-sm font-medium">
							<i class="fa fa-clock-o mr-1"></i>处理中
						</span>
					</div>
				</div>

				<!-- 进度指示器 -->
				<div class="relative">
					<div class="hidden md:flex items-center justify-between mb-8">
						<div class="flex flex-col items-center w-1/4">
							<div
								class="w-10 h-10 rounded-full bg-success flex items-center justify-center text-white mb-2">
								<i class="fa fa-check"></i>
							</div>
							<span class="text-sm font-medium text-success">申请提交</span>
						</div>
						<div class="h-1 flex-1 bg-success"></div>
						<div class="flex flex-col items-center w-1/4">
							<div
								class="w-10 h-10 rounded-full bg-success flex items-center justify-center text-white mb-2">
								<i class="fa fa-check"></i>
							</div>
							<span class="text-sm font-medium text-success">商家审核</span>
						</div>
						<div class="h-1 flex-1 bg-warning"></div>
						<div class="flex flex-col items-center w-1/4">
							<div
								class="w-10 h-10 rounded-full bg-warning flex items-center justify-center text-white mb-2">
								<i class="fa fa-spinner fa-spin"></i>
							</div>
							<span class="text-sm font-medium text-warning">财务处理</span>
						</div>
						<div class="h-1 flex-1 bg-neutral-200"></div>
						<div class="flex flex-col items-center w-1/4">
							<div
								class="w-10 h-10 rounded-full bg-neutral-200 flex items-center justify-center text-neutral-400 mb-2">
								<i class="fa fa-check"></i>
							</div>
							<span class="text-sm font-medium text-neutral-400">退款完成</span>
						</div>
					</div>

					<!-- 移动端时间线 -->
					<div class="md:hidden relative">
						<div class="timeline-line"></div>

						<div class="relative pl-12 pb-8">
							<div class="timeline-dot timeline-dot-active"></div>
							<div>
								<h3 class="font-medium text-success">申请提交</h3>
								<p class="text-neutral-500 text-sm">2023-05-18 09:23:45</p>
								<p class="text-neutral-500 mt-1">您已提交退款申请，等待商家审核</p>
							</div>
						</div>

						<div class="relative pl-12 pb-8">
							<div class="timeline-dot timeline-dot-active"></div>
							<div>
								<h3 class="font-medium text-success">商家审核通过</h3>
								<p class="text-neutral-500 text-sm">2023-05-18 10:45:12</p>
								<p class="text-neutral-500 mt-1">商家已同意退款，正在提交财务处理</p>
							</div>
						</div>

						<div class="relative pl-12 pb-8">
							<div class="timeline-dot timeline-dot-active"></div>
							<div>
								<h3 class="font-medium text-warning">财务处理中</h3>
								<p class="text-neutral-500 text-sm">2023-05-18 11:02:36</p>
								<p class="text-neutral-500 mt-1">财务正在处理您的退款，预计1-3个工作日到账</p>
							</div>
						</div>

						<div class="relative pl-12">
							<div class="timeline-dot"></div>
							<div>
								<h3 class="font-medium text-neutral-400">退款完成</h3>
								<p class="text-neutral-500 text-sm">待处理</p>
								<p class="text-neutral-500 mt-1">退款将原路返回您的支付账户</p>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 退款详情与金额 -->
			<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
				<!-- 退款详情 -->
				<div class="lg:col-span-2 bg-white rounded-lg p-6 card-shadow">
					<h2 class="text-lg font-semibold mb-4 pb-3 border-b border-neutral-100">退款详情</h2>

					<div class="space-y-6">
						<div>
							<h3 class="text-neutral-500 text-sm mb-3">退款商品信息</h3>
							<div class="flex border rounded-lg overflow-hidden">
								<img src="https://picsum.photos/id/26/120/120" alt="商品图片"
									class="w-24 h-24 object-cover">
								<div class="p-4 flex-1">
									<h4 class="font-medium mb-1">2023新款夏季透气运动鞋 - 白色/42码</h4>
									<p class="text-neutral-500 text-sm mb-2">规格：白色 / 42码</p>
									<div class="flex justify-between items-center">
										<span class="text-danger font-medium">¥399.00</span>
										<span class="text-neutral-500">x1</span>
									</div>
								</div>
							</div>
						</div>

						<div>
							<h3 class="text-neutral-500 text-sm mb-3">退款原因与说明</h3>
							<div class="bg-neutral-100 rounded-lg p-4">
								<div class="flex items-start mb-3">
									<span class="text-neutral-500 w-24 flex-shrink-0">退款原因：</span>
									<span>商品尺寸不符，试穿后发现偏大</span>
								</div>
								<div class="flex items-start">
									<span class="text-neutral-500 w-24 flex-shrink-0">退款说明：</span>
									<span>收到商品后试穿，42码比平时偏大一个尺码，希望退换39码。已与客服确认可以退换，现提交退款申请。</span>
								</div>
							</div>
						</div>

						<div>
							<h3 class="text-neutral-500 text-sm mb-3">退款凭证</h3>
							<div class="grid grid-cols-3 gap-3">
								<div
									class="aspect-square rounded-md overflow-hidden border border-neutral-200 relative group cursor-pointer">
									<img src="https://picsum.photos/id/96/300/300" alt="凭证图片1"
										class="w-full h-full object-cover">
									<div
										class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
										<i class="fa fa-search-plus text-white text-xl"></i>
									</div>
								</div>
								<div
									class="aspect-square rounded-md overflow-hidden border border-neutral-200 relative group cursor-pointer">
									<img src="https://picsum.photos/id/21/300/300" alt="凭证图片2"
										class="w-full h-full object-cover">
									<div
										class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
										<i class="fa fa-search-plus text-white text-xl"></i>
									</div>
								</div>
								<div
									class="aspect-square rounded-md border-2 border-dashed border-neutral-300 flex items-center justify-center text-neutral-400 hover:border-primary hover:text-primary transition-colors cursor-pointer">
									<i class="fa fa-plus text-xl"></i>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 金额明细 -->
				<div class="bg-white rounded-lg p-6 card-shadow">
					<h2 class="text-lg font-semibold mb-4 pb-3 border-b border-neutral-100">金额明细</h2>

					<div class="space-y-3 mb-6">
						<div class="flex justify-between">
							<span class="text-neutral-500">商品金额</span>
							<span>¥399.00</span>
						</div>
						<div class="flex justify-between">
							<span class="text-neutral-500">运费</span>
							<span>¥15.00</span>
						</div>
						<div class="flex justify-between">
							<span class="text-neutral-500">优惠券抵扣</span>
							<span class="text-success">-¥20.00</span>
						</div>
						<div class="flex justify-between pt-3 border-t border-neutral-100">
							<span class="text-neutral-500">实付金额</span>
							<span>¥394.00</span>
						</div>
						<div class="flex justify-between text-danger pt-3 border-t border-neutral-100">
							<span>退款金额</span>
							<span class="font-semibold">¥394.00</span>
						</div>
					</div>

					<div class="bg-neutral-100 rounded-lg p-4 mb-6">
						<div class="flex justify-between mb-2">
							<span class="text-neutral-500">退款方式</span>
							<span>原路返回</span>
						</div>
						<div class="flex justify-between mb-2">
							<span class="text-neutral-500">支付方式</span>
							<span>微信支付</span>
						</div>
						<div class="flex justify-between">
							<span class="text-neutral-500">预计到账时间</span>
							<span class="text-warning">2023-05-21前</span>
						</div>
					</div>

					<div class="text-sm text-neutral-500 bg-primary/5 rounded-lg p-3">
						<p class="flex items-start">
							<i class="fa fa-info-circle text-primary mt-0.5 mr-2"></i>
							<span>退款将原路返回至您的支付账户，具体到账时间以银行处理时间为准</span>
						</p>
					</div>
				</div>
			</div>

			<!-- 处理记录 -->
			<div class="bg-white rounded-lg p-6 mb-6 card-shadow">
				<h2 class="text-lg font-semibold mb-4 pb-3 border-b border-neutral-100">处理记录</h2>

				<div class="space-y-4">
					<div class="flex">
						<div class="mr-4 flex-shrink-0">
							<div
								class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
								<i class="fa fa-user"></i>
							</div>
						</div>
						<div>
							<div class="flex flex-col sm:flex-row sm:items-center mb-1">
								<h3 class="font-medium mr-2">您提交了退款申请</h3>
								<span class="text-neutral-500 text-sm">2023-05-18 09:23:45</span>
							</div>
							<p class="text-neutral-500 text-sm">申请退款金额 ¥394.00，原因：商品尺寸不符</p>
						</div>
					</div>

					<div class="flex">
						<div class="mr-4 flex-shrink-0">
							<div
								class="w-8 h-8 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500">
								<i class="fa fa-shopping-bag"></i>
							</div>
						</div>
						<div>
							<div class="flex flex-col sm:flex-row sm:items-center mb-1">
								<h3 class="font-medium mr-2">商家已审核通过</h3>
								<span class="text-neutral-500 text-sm">2023-05-18 10:45:12</span>
							</div>
							<p class="text-neutral-500 text-sm">客服【李小花】已审核通过您的退款申请，正在提交财务处理</p>
						</div>
					</div>

					<div class="flex">
						<div class="mr-4 flex-shrink-0">
							<div
								class="w-8 h-8 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500">
								<i class="fa fa-money"></i>
							</div>
						</div>
						<div>
							<div class="flex flex-col sm:flex-row sm:items-center mb-1">
								<h3 class="font-medium mr-2">财务已受理</h3>
								<span class="text-neutral-500 text-sm">2023-05-18 11:02:36</span>
							</div>
							<p class="text-neutral-500 text-sm">财务【王会计】已受理您的退款申请，将在1-3个工作日内处理</p>
						</div>
					</div>
				</div>
			</div>

			<!-- 操作按钮 -->
			<div class="flex flex-col sm:flex-row justify-between items-center bg-white rounded-lg p-6 card-shadow">
				<div class="text-neutral-500 mb-4 sm:mb-0">
					<i class="fa fa-headphones mr-1"></i>
					<span>有疑问？可联系客服：400-123-4567</span>
				</div>
				<div class="flex space-x-3">
					<button
						class="px-6 py-2 border border-neutral-300 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors">
						取消退款
					</button>
					<button class="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
						联系客服
					</button>
				</div>
			</div>
		</main>

		<footer class="bg-white border-t border-neutral-200 mt-12">
			<div class="container mx-auto px-4 py-8">
				<div class="text-center text-neutral-500 text-sm">
					<p>© 2023 订单管理系统 版权所有</p>
					<p class="mt-2">客服热线：400-123-4567（工作时间：9:00-21:00）</p>
				</div>
			</div>
		</footer>

		<!-- 图片预览模态框 (默认隐藏) -->
		<div id="imageModal" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center hidden">
			<button id="closeModal" class="absolute top-4 right-4 text-white text-2xl">
				<i class="fa fa-times"></i>
			</button>
			<img id="modalImage" src="" alt="预览图片" class="max-w-[90%] max-h-[90vh] object-contain">
		</div>

		<script>
			// 图片预览功能
			document.addEventListener('DOMContentLoaded', () => {
				const modal = document.getElementById('imageModal');
				const modalImg = document.getElementById('modalImage');
				const closeBtn = document.getElementById('closeModal');
				const images = document.querySelectorAll('.grid-cols-3 img');

				images.forEach(img => {
					img.addEventListener('click', () => {
						modal.style.display = 'flex';
						modalImg.src = img.src;
					});
				});

				closeBtn.addEventListener('click', () => {
					modal.style.display = 'none';
				});

				modal.addEventListener('click', (e) => {
					if (e.target === modal) {
						modal.style.display = 'none';
					}
				});
			});
		</script>
	</body>
</html>